<template>
  <el-drawer
    v-if="dialogVisible"
    size="70%"
    :title="title"
    :destroy-on-close="true"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :modal-append-to-body="false"
    @close="onClose"
  >
    <div class="drawer-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="baseInfo">
          <baseInfo :userId="userId"></baseInfo>
        </el-tab-pane>
        <el-tab-pane label="学历信息" name="sysEducation" v-if="$store.getters.roles.includes('SYS_EDUCATION')">
          <sysEducation :userId="userId"></sysEducation>
        </el-tab-pane>
        <el-tab-pane label="银行卡信息" name="sysBank" v-if="$store.getters.roles.includes('SYS_BANK')">
          <sysBank :userId="userId"></sysBank>
        </el-tab-pane>
        <el-tab-pane label="通讯信息" name="sysCommunication" v-if="$store.getters.roles.includes('SYS_COMMUNICATION')">
          <sysCommunication :userId="userId"></sysCommunication>
        </el-tab-pane>
        <el-tab-pane label="职称信息" name="sysPositional" v-if="$store.getters.roles.includes('SYS_POSITIONAL')">
          <sysPositional :userId="userId"></sysPositional>
        </el-tab-pane>
        <el-tab-pane label="开票信息" name="sysReceipt" v-if="$store.getters.roles.includes('SYS_RECEIPT')">
          <sysReceipt :userId="userId"></sysReceipt>
        </el-tab-pane>
        <el-tab-pane label="专业信息" name="sysSkill" v-if="$store.getters.roles.includes('SYS_SKILL')">
          <sysSkill :userId="userId"></sysSkill>
        </el-tab-pane>
        <el-tab-pane label="处罚信息" name="sysPunish" v-if="$store.getters.roles.includes('SYS_PUNISH')">
          <sysPunish :userId="userId"></sysPunish>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script>
import baseInfo from '@/views/sysUser/components/BaseInfo'
import sysEducation from '@/views/sysEducation'
import sysCommunication from '@/views/sysCommunication'
import sysPositional from '@/views/sysPositional'
import sysSkill from '@/views/sysSkill'
import sysBank from '@/views/sysBank'
import sysReceipt from '@/views/sysReceipt'
import sysPunish from '@/views/sysPunish/sysUserPunish'

export default {
  components: { baseInfo, sysEducation, sysBank, sysCommunication, sysPositional, sysSkill, sysReceipt, sysPunish },
  data() {
    return {
      dialogVisible: false,
      title: '',
      userId: '',
      activeName: 'baseInfo'
    }
  },
  methods: {
    onShow(id, name) {
      this.userId = id
      this.title = name
      this.dialogVisible = true
    },
    onClose() {
      this.dialogVisible = false
      this.form = this.$options.data().form
    }
  }
}
</script>

<style scoped>

.el-drawer__wrapper /deep/
.el-drawer__header {
  margin-bottom: 0px !important;
}
</style>
